<!DOCTYPE html>
<html lang = "en">
    <head>
        <title>v-for</title>
    </head>

    <body>

        <div id = "app">
        <input type = "button" value = "添加数据" @click = "add">
        <input type = "button" value = "移除数据" @click = "remove">

        <ul>
            <li v-for = "(item, index) in name">
               {{index + 1}} name:{{ item }}
            </li>
        </ul>

        <h2 v-for = "item in vegetable" v-bind:title = "item.name">
            {{item.name}}
        </h2>

        </div>

        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

        <script>
            var app = new Vue ({
                el:"#app",
                data: {
                    name:["Simon", "John", "CDQ"],
                    vegetable: [
                        {name:"白马"},
                        {name:"黑驴"}
                    ]
                },
                methods: {
                    add:function() {
                        this.vegetable.push({name:"紫马"});
                    },
                    remove:function() {
                        this.vegetable.shift();
                    }
                }
            })
        </script>

    </body>
</html>